<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加角色 -->
    <el-button class="btn" type="primary" @click="addRole">添加角色</el-button>
    <!-- 角色列表  -->
    <el-table :data="roleList.data" border style="width: 100%" class="qxlist">
      <el-table-column align="center" label="序号" type="index" />
      <el-table-column align="center" prop="roleName" label="角色名称" />
      <el-table-column align="center" prop="roleDesc" label="角色描述" />
      <!-- 操作 -->
      <el-table-column align="center" prop="op" label="操作">
        <template #default="scope">
          <!-- 编辑 -->
          <el-button type="primary" :icon="Edit" @click="editrole(scope)" />
          <!-- 删除 -->
          <el-button type="danger" :icon="Delete" @click="deleteInfo(scope)" />
          <!-- 分配权限 -->
          <el-popover
            placement="top-start"
            trigger="hover"
            content="分配角色"
            effect="dark"
          >
            <template #reference>
              <el-button
                type="warning"
                :icon="Setting"
                @click="distributeRoleDialog(scope)"
              />
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!-- ----------------------弹出框---------------------------- -->
    <!-- 角色列表 -->
    <el-dialog v-model="addialogVisible" title="添加角色" width="30%">
      <el-form
        ref="roleruleFormRef"
        :model="roleruleForm"
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="角色名称" prop="rolename">
          <el-input v-model="roleruleForm.rolename" />
        </el-form-item>
        <el-form-item label="角色描述" prop="roledescribe">
          <el-input v-model="roleruleForm.roledescribe" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addConfirm(roleruleFormRef)"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog v-model="editroledialogVisible" title="编辑角色" width="30%">
      <el-form
        ref="editruleFormRef"
        :model="editroleruleForm"
        :rules="editrules"
        label-width="80px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="角色名称" prop="rolename">
          <el-input v-model="editroleruleForm.rolename" />
        </el-form-item>
        <el-form-item label="角色描述" prop="roledescribe">
          <el-input v-model="editroleruleForm.roledescribe" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editroledialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editroleConfirm(editruleFormRef)"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, toRef } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { Delete, Edit, Setting } from "@element-plus/icons-vue";
import service from "../../until/service";

//-------------获取角色列表--------------
let roleList = reactive({
  data: [],
});
onMounted(() => {
  service
    .get("roles")
    .then((res) => {
      console.log(res.data);
      roleList.data = res.data.data;
    })
    .catch((error) => console.log(error));
});

// ------------添加角色弹出框----------------
const addialogVisible = ref(false);
// const formSize = ref("default");
const roleruleFormRef = ref<FormInstance>();
const roleruleForm = reactive({
  rolename: "",
  roledescribe: "",
});

const rules = reactive<FormRules>({
  //规则校验
  rolename: [
    { required: true, message: "请输入角色名称", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  roledescribe: [
    { required: true, message: "请输入角色名称", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});

//确认添加
const addConfirm = (formEl) => {
  formEl.validate((val) => {
    if (!val) return;
    addialogVisible.value = false;
    service
      .post("roles", {
        roleName: roleruleForm.rolename,
        roleDesc: roleruleForm.roledescribe,
      })
      .then((res) => {
        console.log(res);
        if (res.data.meta.status === 201) {
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          //尾插在最后
        } else {
          ElMessage({
            message: "修改失败",
            type: "error",
          });
        }
      })
      .catch((error) => console.log(error));
  });
};

// ----------------编辑弹出框-----------------------
const editroledialogVisible = ref(false);
const editruleFormRef = ref<FormInstance>();
const editroleruleForm = reactive({
  rolename: "",
  roledescribe: "",
});
const editrules = {
  //规则校验
  rolename: [
    { required: true, message: "请输入角色名称", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  roledescribe: [
    { required: true, message: "请输入角色名称", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
};
let editId = -99;
const editrole = (scoped) => {
  editroledialogVisible.value = true;
  // console.log(scoped.row.id);
  editId = scoped.row.id;
};
//确认修改
const editroleConfirm = (formEl) => {
  formEl.validate((val) => {
    if (!val) return;
    service
      .put(`roles/${editId}`, {
        roleName: editroleruleForm.rolename,
        roleDesc: editroleruleForm.roledescribe,
      })
      .then((res) => {
        let editIndex = roleList.data.findIndex((item) => item.id == editId);
        roleList.data[editIndex] = res.data.data;
        console.log(res.data.data, editIndex, "---", roleList.data);

        formEl.resetFields();
      })
      .catch((error) => console.log(error));
  });
  editroledialogVisible.value = false;
};
</script>

<style scoped>
.btn {
  margin-top: 20px;
  height: 40px;
}
.qxlist {
  margin-top: 20px;
}
</style>